import React from "react";
import styles from "./signIn.module.less";
import { ViewModel } from "./view-model";
import { useTranslation } from "react-i18next";
import LinearInput from "../../compoents/linear-input";
import PhoneInput from "../../compoents/phone-input";
import Loading from "../../compoents/s-loading";
import { useDispatch, useSelector } from "react-redux";
// import Container from "../../compoents/container";
import AccountLayout from "../../compoents/account-layout";
import utilBase from "../../utils/basc";
import toast from "../../compoents/toast";
import VerificationCode from "../../compoents/verifiaction-code";
import { LocalKeyMap } from "../../local";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
function SignIn() {
    var _ViewModel = ViewModel(), state = _ViewModel.state, setState = _ViewModel.setState, handleSwitch = _ViewModel.handleSwitch, // forgetPwd,
    handleSignIn = _ViewModel.handleSignIn, // handleSignUp,
    loading = _ViewModel.loading;
    var t = useTranslation().t;
    var dispatch = useDispatch();
    var theme = useSelector(function(rootState) {
        return rootState.app.theme;
    });
    var checkEmail = function() {
        if (!state.email) return;
        if (utilBase.checkEmail(state.email)) {
            setState({
                emailError: false
            });
        } else {
            setState({
                emailError: true
            });
            toast.createToast({
                type: "errToast",
                message: t(LocalKeyMap["toast.error.validEmail"])
            });
        }
    };
    var canSelect = (state.isEmail ? state.email.trim().length > 0 : state.phone.trim().length > 0) && state.code.trim().length > 0 && !state.emailError;
    return /*#__PURE__*/ _jsx(_Fragment, {
        children: /*#__PURE__*/ _jsx(AccountLayout, {
            children: /*#__PURE__*/ _jsx("div", {
                className: styles["sign_in"],
                children: /*#__PURE__*/ _jsx("div", {
                    className: styles.page,
                    children: /*#__PURE__*/ _jsxs("div", {
                        className: styles.content,
                        children: [
                            /*#__PURE__*/ _jsx("div", {
                                className: styles.flex,
                                style: {
                                    justifyContent: "center"
                                }
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: styles.labelBox,
                                children: [
                                    /*#__PURE__*/ _jsx("div", {
                                        className: styles.label,
                                        children: state.isEmail ? t("loginHeader0") : t("loginHeader1")
                                    }),
                                    state.isEmail ? /*#__PURE__*/ _jsx(LinearInput, {
                                        value: state.email,
                                        onChange: function(value) {
                                            return setState({
                                                email: value
                                            });
                                        },
                                        placeholder: t("loginHeader31"),
                                        maxlength: 30,
                                        name: "email",
                                        error: state.emailError,
                                        onBlur: checkEmail
                                    }) : /*#__PURE__*/ _jsx(PhoneInput, {
                                        value: state.phone,
                                        onChange: function(area, phone) {
                                            setState({
                                                area: area,
                                                phone: phone
                                            });
                                        },
                                        maxlength: 15,
                                        name: "phone"
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsx("div", {
                                className: styles.label,
                                children: t(LocalKeyMap.verificationCode)
                            }),
                            /*#__PURE__*/ _jsx(VerificationCode, {
                                target: state.isEmail ? state.email : state.area + "-" + state.phone,
                                value: state.code,
                                onChange: function(value) {
                                    return setState({
                                        code: value
                                    });
                                }
                            }),
                            /*#__PURE__*/ _jsx("div", {
                                className: "".concat(styles.btn, " ").concat(canSelect ? styles.active : ""),
                                onClick: function() {
                                    return canSelect ? handleSignIn() : {};
                                },
                                children: loading ? /*#__PURE__*/ _jsx(Loading, {
                                    color: "#fff"
                                }) : t("loginHeader14")
                            })
                        ]
                    })
                })
            })
        })
    });
}
export default SignIn;

 //# sourceMappingURL=index.js.map